<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.common.dev.min.js" integrity="sha512-TpgbLHXaTCAZ7ULhjopb1PveTz5Jx6KEQUtMfXhV0m0EArh+6O8ybZjjDN1Yug6oagN6iFm6EoMjuYSiFr0qXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js" integrity="sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .content {
            height: 100%;
            overflow: hidden;
        }
        .head {
            justify-content: end!important;
        }
        .form {
            padding: 16px;
            display: flex;
            flex-flow: row;
            justify-content: center;
            gap: 12px;
        }
        .btn {
            display: inline-flex;
            flex-flow: column;
            align-items: center;
            height: 32px;
            line-height: 32px;
            padding: 0 10px;
            cursor: pointer;
            border: 1px solid #333;
            border-radius: 5px;
            text-align: center;
            position: relative;
            box-sizing: border-box;
            min-width: 80px;
        }
        .btn.disabled {
            cursor: not-allowed;
            background-color: #ccc;
        }
        .time-set {
            height: 32px;
            line-height: 32px;
            color:#E46F6F;
            font-weight: bold;
        }
        .body {
            height: calc(100% - 64px);
            background-color: aliceblue;
        }
        .list {
            position: absolute;
            top: 35px;
            display: flex;
            flex-flow: column;
            gap: 8px;
            transition: all .4s;
            overflow: hidden;
            background-color: #fff;
            border: 1px solid #333;
            border-radius: 5px;
            box-sizing: border-box;
            padding: 10px 0;
            z-index: 10;
        }
        .list-item {
            background-color: antiquewhite;
            padding: 0 10px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            min-width: 80px;
            width: fit-content;
        }
        .list-item:hover {
            background-color: aqua;
        }
        .table-content {
            margin: 10px;
            background-color: #fff;
            height: calc(100% - 84px);
            overflow: hidden;
        }
        .tabs {
            display: flex;
            flex-flow: row nowrap;
            gap: 10px;
        }
        .tabs-item {
            height: 32px;
            line-height: 32px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        .tabs-item.active, .tabs-item:hover {
            background-color: antiquewhite;
        }
        .box {
            padding: 20px;
            height: calc(100% - 32px);
            display: flex;
            flex-flow: column;
            overflow: auto;
            position: relative;
        }
        /* 表格 */
        .table-head {
            position: sticky;
            top: 0;
            background-color: #fff;
        }
        .table-body td {
            text-align: center;
        }
        .table-body .txtbtn {
            text-align: center;
            cursor: pointer;
            color: rgb(36, 36, 182);
        }
        .table-body .txtbtn:hover {
            color: rgba(36, 36, 182, 0.696);
        }
        .table-foot {
            position: sticky;
            bottom: 0;
            background-color: #fff;
        }

        /* 日历 */
        .great-calendar-flex {
            display: flex;
            flex-flow: row wrap;
            padding-top: 9px;
        }
        .great-calendar-flex .day-num {
            width: calc(100% / 7);
            line-height: 32px;
            text-align: center;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #050809;
            letter-spacing: 2px;
            text-shadow: 1px 7px 19px #D1DAE2;
        }
        .great-calendar-flex .day {
            width: calc(100% / 7);
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 32px;
            letter-spacing: 2px;
            text-shadow: 1px 7px 19px #D1DAE2;
            text-align: center;
        }
        .great-calendar-flex .day.before {
            color: #8F959C;
        }
        .great-calendar-flex .day.current {
            color: #050809;
            cursor: pointer;
        }
        .great-calendar-flex .day.current .green, .great-calendar-flex .day.current .yellow, .great-calendar-flex .day.current .red {
            display: inline-block;
            box-sizing: border-box;
            width: 28px;
            height: 28px;
            line-height: 28px;
            border-radius: 16px;
            color: #fff;
        }
        .great-calendar-flex .day.current .green {
            background: #59C850;
        }
        .great-calendar-flex .day.current .yellow {
            background: #F1CD21;
        }
        .great-calendar-flex .day.current .red {
            background: #E46F6F;
        }
        .great-calendar-flex .day.after {
            color: #8F959C;
        }
        .legend {
            display: flex;
            flex-flow: row nowrap;
            gap: 20px;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
        }
        .legend .item {
            --color: #ccc;
            height: 32px;
            line-height: 32px;
        }
        .legend .item::before {
            content: '';
            margin-right: 8px;
            display: inline-block;
            height: 16px;
            line-height: 32px;
            width: 16px;
            border-radius: 50%;
            background-color: var(--color);
        }
        .tips {
            margin-top: 10px;
            color: #999;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
        }

        /* 柱状图饼状图 */
        .charts {
            height: 100%;
        }
        .box textarea {
            flex: 1;
            resize: none;
        }
        .mask {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
        }
        .mask .dialog {
            height: 300px;
            width: 620px;
            padding: 10px;
            background: #f9dd06;
            margin: 12vh auto;
            position: relative;
            display: flex;
            flex-flow: column nowrap;
            gap: 10px;
        }
        .mask .dialog .title {
            font-weight: bold;
        }
        .mask .dialog .close {
            position: absolute;
            height: 18px;
            width: 18px;
            cursor: pointer;
            right: 7px;
            top: 7px;
        }
        .mask .dialog .tabs {
            flex-flow: column;
        }
        .mask .dialog textarea {
            width: 320px;
            resize: none;
        }
    </style>
</head>
<body>
    <div id="app" class="content">
        <div class="head form">
            <div class="btn" @click="output">导出</div>
            <div class="btn" @click="input">导入<input v-show="false" type="file" accept="json/*" @change="onChange"></div>
        </div>
        <div class="body">
            <div class="form">
                <div v-show="duration == 0" class="btn" @mouseenter="isShow1 = true" @mouseleave="isShow1 = false">
                    开始
                    <div class="list" :style="`${isShow1 ? 'max-height: 400px; opacity: 1' : 'max-height: 0; opacity: 0'}`">
                        <div v-for="(item, index) in list" :key="index" class="list-item" @click="startWith(item)">{{ item }}</div>
                    </div>
                </div>
                <div v-show="duration > 0" class="time-set">学习时长：{{ formateTime(duration) }}，继续加油！</div>
                <div class="btn" :class="{ disabled: !startTime }" @mouseenter="!!startTime && (isShow2 = true)" @mouseleave="!!startTime && (isShow2 = false)">
                    结束
                    <div class="list" :style="`${isShow2 ? 'max-height: 400px; opacity: 1' : 'max-height: 0; opacity: 0'}`">
                        <div v-for="(type, index) in types" :key="index" class="list-item" @click="endWitdh(type)">{{ type }}</div>
                    </div>
                </div>
            </div>
            <div class="table-content">
                <div class="tabs">
                    <div v-for="item in tabs"
                         :key="item"
                         class="tabs-item"
                         :class="{active: activeTab == item}"
                         @click="activeTab = item">
                        {{ item }}
                    </div>
                </div>
                <div v-if="activeTab=='表格'" class="box">
                    <table border="1" class="table-head">
                        <colgroup>
                            <col v-for="{name, width} in coloumns" :key="name" :width="width">
                        </colgroup>
                        <tr>
                            <th v-for="{name, width} in coloumns" :key="name" :style="`width: ${width}`">{{name}}</th>
                        </tr>
                    </table>
                    <table v-if="history.length > 0" border="1" class="table-body">
                        <colgroup>
                            <col v-for="{name, width} in coloumns" :key="name" :width="width">
                        </colgroup>
                        <tr v-for="(data, index) in history" :key="index">
                            <td v-for="{prop, width} in coloumns" :key="prop">
                                <span v-if="
                                    prop == 'duration'
                                ">
                                    {{ formateTime(data[prop]) }}
                                </span>
                                <span v-else-if="
                                    prop == 'startTime'
                                        || prop == 'endTime'
                                ">
                                    {{ formateTime(new Date(data[prop])) }}
                                </span>
                                <span v-else-if="
                                    prop == 'mark'
                                ">
                                    <div class="txtbtn" @click="showDialog([data])">查看</div>
                                </span>
                                <span v-else>
                                    {{ data[prop] }}
                                </span>
                            </td>
                        </tr>
                    </table>
                    <table v-if="history.length > 0" border="1" class="table-foot">
                        <colgroup>
                            <col v-for="{name, width} in coloumns" :key="name" :width="width">
                        </colgroup>
                        <tr>
                            <th colspan="2">合计</th>
                            <th>{{ formateTime(history.reduce((a,b) => a + b.duration, 0)) }}</th>
                            <th colspan="3">
                                {{ formateTime(new Date(history[history.length - 1].startTime)) }} ~ {{ formateTime(new Date(history[0].endTime)) }}
                            </th>
                        </tr>
                    </table>
                    <div v-if="history.length == 0" class="tips" style="flex: 1;">
                        暂无数据
                    </div>
                </div>
                <div v-if="activeTab=='日历'" class="box">
                    <div class="form">
                        <div class="btn" @click="getLastMonth">上个月</div>
                        <div class="time-set">本月学习时长：{{ formateTime(monthTotal) }}，继续加油！</div>
                        <div class="btn" :class="{disabled: !canNext}" @click="getNextMonth">下个月</div>
                    </div>
                    <div class="great-calendar-flex">
                        <div v-for="dayNum in 7" :key="dayNum*4+1" class="day-num">
                            {{dayNum===1 ? '日' :
                            dayNum===2 ? '一' :
                            dayNum===3 ? '二' :
                            dayNum===4 ? '三' :
                            dayNum===5 ? '四' :
                            dayNum===6 ? '五' : '六'
                            }}
                        </div>
                        <div v-for="(day, index) in beforeMounth" :key="index*4+2" class="day before">
                            {{new Date(day.date).getDate()}}
                        </div>
                        <div v-for="(day, index) in currentMounth" :key="index*4+3" class="day current" :title="day.title">
                            <div :class="day.num<=0?'':day.num<2?'red':day.num<=4?'yellow':'green'" @click="showDialog(day.items)">
                                {{
                                    new Date(day.date).getDate()
                                }}
                            </div>
                        </div>
                        <div v-for="(day, index) in afterMounth" :key="index*4" class="day after">
                            {{new Date(day.date).getDate()}}
                        </div>
                    </div>
                    <div class="legend">
                        <div class="item">当天未学习</div>
                        <div class="item" style="--color: red">当天学习时长小于2小时</div>
                        <div class="item" style="--color: yellow">当天学习时长小于4小时</div>
                        <div class="item" style="--color: green">当天学习时长大于4小时</div>
                    </div>
                    <div class="tips">可以点击日期，查看当天学习详情!</div>
                </div>
                <div v-if="activeTab=='笔记'" class="box">
                    <textarea v-model="mark"></textarea>
                </div>
                <div v-if="activeTab==''" class="box"></div>
                <div class="box" :style="`${activeTab=='柱状图' ? 'opacity: 1;z-index: 1' : 'opacity: 0;z-index: 0'}`">
                    <div ref="bar" class="charts"></div>
                </div>
                <div class="box" :style="`${activeTab=='饼图' ? 'opacity: 1;z-index: 1' : 'opacity: 0;z-index: 0'}`" style="transform: translate(0px, -100%);">
                    <div ref="pie" class="charts"></div>
                </div>
            </div>
        </div>
        <div class="foot"></div>
        <div v-if="isShowDialog" class="mask">
            <div class="dialog">
                <div class="close" @click="beforeClose">
                    X
                </div>
                <div class="title">
                    {{ getTitle }}
                </div>
                <div
                    style="display: flex;
                    flex-flow: row nowrap;
                    gap: 10px;
                    flex: 1;">
                    <div class="tabs">
                        <div v-for="item in dialogTabs"
                            :key="item"
                            class="tabs-item"
                            :class="{active: dialogTabActive == item}"
                            @click="dialogTabActive = item">
                            {{ formateTime(new Date(item.startTime)).substring(10, 18) }}
                            （{{ item.active }} / {{ item.type }}）
                        </div>
                    </div>
                    <textarea v-model="this.dialogTabActive.mark" readonly></textarea>
                </div>
            </div>
        </div>
    </div>
    <script>
        const white = {
            list: null,
            active: null,
            types: null,
            history: null,
        }
        var dataJson = {
            isShow1: false,
            isShow2: false,
            list: ['行测', '申论'], // 科目
            active: '行测',
            types: ['听课', '刷题'],
            startTime: null,
            endTime: null,
            isShowDialog: false,
            mark: '',
            dialogTabs: [],
            dialogTabActive: {},
            duration: 0,
            timer: null,
            history: [],
            tabs: ['表格', '日历', '柱状图', '饼图'],
            activeTab: '表格',
            // 表格
            coloumns: [
                { name: '科目', prop: 'active', width: '200px' },
                { name: '状态', prop: 'type', width: '200px' },
                { name: '时间', prop: 'duration', width: '200px' },
                { name: '开始时间', prop: 'startTime', width: '200px' },
                { name: '结束时间', prop: 'endTime', width: '200px' },
                { name: '笔记', prop: 'mark', width: '100px' },
            ],
            // 日历
            today: null,
            beforeMounth: [],
            currentMounth: [],
            afterMounth: [],
            barOption: {
                title: {
                    text: '学习情况'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: []
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: 'slider', // 滑动条类型
                        end: 100, // 初始时显示最右侧最新的数据
                    },
                    {
                        type: 'inside',
                    }
                ],
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    min: -1,
                },
                yAxis: {
                    type: 'value',
                    name: '单位/h'
                },
                series: [
                    // {
                    //     name: 'Email',
                    //     type: 'bar',
                    //     stack: '总时长',
                    //     data: [120, 132, 101, 134, 90, 230, 210]
                    // },
                ]
            },
            pieOption: {
                title: {
                    text: '学习情况'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a}<br />{b0}: {c0}小时'
                },
                legend: {
                },
                series: [
                    {
                        name: '学科占比',
                        type: 'pie',
                        data: [],
                        radius: '40%',
                        center: ['50%', '50%'],
                        left: 0,
                        right: '50%',
                        top: 0,
                        bottom: 0
                    },
                    {
                        name: '方式占比',
                        type: 'pie',
                        data: [],
                        radius: '40%',
                        center: ['50%', '50%'],
                        left: '50%',
                        right: 0,
                        top: 0,
                        bottom: 0
                    },
                ]
            },
        }
        var app = new Vue({
            el: '#app',
            data() {
                return dataJson
            },
            mounted() {
                window.vue = this
                this.today = new Date()
                this.initCalendar()
                this.init()
            },
            methods: {
                output() {
                    const btn = document.createElement('a')
                    btn.download = '导出数据.json'
                    btn.style.display = 'none'
                    const that = {}
                    for (const key of Object.keys(dataJson)) {
                        if (key in white) {
                            that[key] = this[key]
                        }
                    }
                    const json = JSON.stringify(that, null, 4)
                    const blob = new Blob([json], {
                        type: 'application/json'
                    })
                    btn.href = URL.createObjectURL(blob)
                    document.body.appendChild(btn)
                    btn.click()
                    document.body.removeChild(btn)
                },
                input(e) {
                    e.target.children?.[0]?.click()
                },
                onHistoryChange() {
                    const that = this
                    this.today = new Date()
                    this.initCalendar()
                    _initBar()
                    _initPie()
                    this.reload(this.barChart, this.barOption)
                    this.reload(this.pieChart, this.pieOption)
                    function _initPie() {
                        const { types, list } = that
                        that.pieOption.series[0].data = [
                            ...list.map(title => ({
                                name: title,
                                value: that.polyHistoryByDay.find(item => item.type == title).data.reduce((a, b) => a + b, 0).toFixed(2)
                            })),
                        ]
                        that.pieOption.series[1].data = [
                            ...types.map(title => ({
                                name: title,
                                value: that.polyHistoryByDay.find(item => item.type == title).data.reduce((a, b) => a + b, 0).toFixed(2)
                            })),
                        ]
                    }
                    function _initBar() {
                        const { types, list } = that
                        that.barOption.legend.data = [...types, ...list]
                        that.barOption.xAxis.data = that.polyHistoryByDay.find(item => item.type == 'yearList').data.map(item => item.split(' ')[0])
                        that.barOption.xAxis.max = that.barOption.xAxis.data.length + 1
                        if (that.barOption.xAxis.data.length > 30) {
                            that.barOption.dataZoom[0].startValue = that.barOption.xAxis.data[that.barOption.xAxis.data.length - 30]
                        }
                        that.barOption.series = [
                            ...types.map(title => ({
                                name: title,
                                type: 'bar',
                                stack: '按学习方式',
                                barMaxWidth: 30,
                                data: that.polyHistoryByDay.find(item => item.type == title).data.map(item => item.toFixed(1))
                            })),
                            ...list.map(title => ({
                                name: title,
                                type: 'bar',
                                stack: '按学科',
                                barMaxWidth: 30,
                                data: that.polyHistoryByDay.find(item => item.type == title).data.map(item => item.toFixed(1))
                            })),
                        ]
                    }
                },
                onChange(e) {
                    const fileReader = new FileReader()
                    fileReader.readAsDataURL(e.target.files[0])
                    fileReader.onload = (evt) => {
                        fetch(evt.target.result)
                            .then(response => response.text())
                            .then(data => {
                                const jsonObject = JSON.parse(data);
                                console.log(jsonObject);
                                for (const key of Object.keys(jsonObject)) {
                                    if (key in white) {
                                        this[key] = jsonObject[key]
                                    }
                                }
                                this.onHistoryChange()
                            })
                            .catch(error => console.error('Error:', error));
                    }
                    
                },
                startWith(item) {
                    this.active = item
                    this.startTime = new Date()
                    this.isShow1 = false
                    this.tabs.push('笔记')
                    this.activeTab = '笔记'
                    this.duration = new Date() - this.startTime
                    this.timer = setInterval(() => {
                        this.duration = new Date() - this.startTime
                    }, 1000)
                },
                endWitdh(type) {
                    this.endTime = new Date()
                    this.history.unshift({
                        active: this.active,
                        startTime: this.startTime,
                        endTime: this.endTime,
                        duration: this.endTime - this.startTime,
                        type: type,
                        mark: this.mark,
                    })
                    this.mark = ''
                    this.tabs = this.tabs.filter(item => item !== '笔记')
                    this.activeTab = this.tabs[0]
                    this.active = '行测'
                    this.startTime = null
                    this.isShow2 = false
                    this.duration = 0
                    clearInterval(this.timer)
                    this.timer = null
                    this.onHistoryChange()
                },
                formateTime(time) {
                    if (time instanceof Date) {
                        // 返回yyyy/mm/dd HH:mm:ss(week)
                        let str = time.toLocaleString(),
                        week = [
                            '星期一',
                            '星期二',
                            '星期三',
                            '星期四',
                            '星期五',
                            '星期六',
                            '星期天',
                        ][time.getDay()]
                        return `${str} (${week})`
                    } else {
                        const seconds = time / 1000
                        const hours = Math.floor(seconds / 3600);
                        const minutes = Math.floor((seconds % 3600) / 60);
                        const secs = seconds % 60;
                        return (hours > 0 ? (hours + '时') : '') + (hours > 0 || minutes > 0 ? (minutes + '分') : '') + secs.toFixed(1) + '秒';
                        // 返回小时，单位h
                        // return (time / 1000 / 60 / 60).toFixed(1) + '小时'
                    }
                },
                initCalendar(date) {
                    this.currentMounth = []
                    let current = date ? date : this.today
                    const year = current.getFullYear(); // 获取当前年份
                    const month = current.getMonth(); // 获取当前月份
                    let fir = new Date(year, month, 1).getDate()
                    let last = new Date(year, month + 1, 0).getDate()
                    for (let i = fir; i < last + 1; i++) {
                        let x = new Date(year, month, i),
                         y = new Date(year, month, i + 1);
                        y.setSeconds(-1)
                        let items = this.history.filter(h => {
                            return new Date(h.startTime) > x && new Date(h.startTime) <= y
                        })
                        let num = items.reduce((a,b) => a + b.duration, 0) / 1000 / 60 / 60;
                        this.currentMounth.push({
                            date: new Date(year, month, i),
                            num: num,
                            title: num <= 0 ? '没有学习！' : num.toFixed(1) + '小时',
                            items,
                        })
                    }
                    let time1, time2
                    let first = new Date(this.currentMounth[0].date).getDay()
                    let beforeDay = first === 7 ? 0 : first
                    this.beforeMounth = []
                    for (let i = 0; i < beforeDay; i++) {
                        time1 = new Date(new Date(this.currentMounth[0].date).getTime() - (i + 1) * 1000*60*60*24)
                        this.beforeMounth.unshift({
                            date: time1.getFullYear() + '-' + (time1.getMonth() + 1) + '-' + time1.getDate()
                        })
                    }
                    // 六行补齐
                    let afterDay = 42 - this.currentMounth.length - beforeDay
                    this.afterMounth = []
                    for (let i = 0; i < afterDay; i++) {
                        time2 = new Date(new Date(this.currentMounth[this.currentMounth.length - 1].date).getTime() + (i + 1) * 1000*60*60*24)
                        this.afterMounth.push({
                            date: time2.getFullYear() + '-' + (time2.getMonth() + 1) + '-' + time2.getDate()
                        })
                    }
                },
                getLastMonth() {
                    const year = this.today.getFullYear(); // 获取当前年份
                    const month = this.today.getMonth(); // 获取当前月份
                    this.today = new Date(year, month - 1)
                    this.initCalendar()
                },
                getNextMonth() {
                    const year = this.today.getFullYear(); // 获取当前年份
                    const month = this.today.getMonth(); // 获取当前月份
                    const year2 = new Date().getFullYear(); // 获取当前年份
                    const month2 = new Date().getMonth(); // 获取当前月份
                    if (this.canNext) {
                        this.today = new Date(year, month + 1)
                        this.initCalendar()
                    }
                },
                init() {
                    let barChart = echarts.init(this.barChart)
                    this.barOption && barChart.setOption(this.barOption)
                    let pieChart = echarts.init(this.pieChart)
                    this.pieOption && pieChart.setOption(this.pieOption)
                    let handleRisize = () => {
                        barChart.resize()
                        pieChart.resize()
                    }
                    window.addEventListener('resize', handleRisize)
                    this.$once('hook:beforeDestory', () => {
                        window.removeEventListener('resize', handleRisize)
                    })
                },
                reload (chartDom, option) {
                    if (!chartDom) return
                    if (chartDom.hasAttribute('_echarts_instance_')) {
                        chartDom.removeAttribute('_echarts_instance_')
                    }
                    let myChart = echarts.init(chartDom)
                    option && myChart.setOption(option)
                },
                showDialog(items) {
                    this.isShowDialog = true
                    this.dialogTabs = items
                    this.dialogTabActive = this.dialogTabs[0]
                },
                beforeClose() {
                    this.isShowDialog = false
                    this.dialogTabs = []
                    this.dialogTabActive = {}
                }
            },
            computed: {
                canNext() {
                    const year = this.today.getFullYear(); // 获取当前年份
                    const month = this.today.getMonth(); // 获取当前月份
                    const year2 = new Date().getFullYear(); // 获取当前年份
                    const month2 = new Date().getMonth(); // 获取当前月份
                    return new Date(year, month + 1) < new Date(year2, month2 + 1)
                },
                barChart () {
                    return this.$refs.bar
                },
                pieChart () {
                    return this.$refs.pie
                },
                // 聚合数据（将一天的数据聚合成一条）
                polyHistoryByDay() {
                    const result = [
                        ...this.list.map(item => ({
                            type: item,
                            data: []
                        })),
                        ...this.types.map(item => ({
                            type: item,
                            data: []
                        })),
                        {
                            type: 'yearList',
                            data: []
                        },
                    ]
                    if (!Array.isArray(this.history) || this.history.length == 0) {
                        return result
                    }
                    const firstDay = new Date(this.history[this.history.length - 1].startTime)
                    const lastDay = new Date(this.history[0].startTime)
                    const allDay = []
                    for (let i = new Date(firstDay.getFullYear(), firstDay.getMonth(), firstDay.getDate()); i < new Date(lastDay.getFullYear(), lastDay.getMonth(), lastDay.getDate() + 1);) {
                        allDay.push(new Date(i))
                        i.setDate(i.getDate() + 1)
                    }
                    console.log(allDay)
                    
                    result.map(item => {
                        if (item.type == 'yearList') {
                            item.data = allDay.map(y => y.toLocaleString())
                            return item
                        }
                        // 分别筛选list列表和type列表
                        const arr1 = this.history.filter(h => h.active === item.type || h.type === item.type)
                        item.data = allDay.map(date => {
                            // 筛选出当天数据
                            const arr2 = arr1.filter(h => {
                                return new Date(h.startTime) >= date && new Date(h.startTime) < new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1)
                            })
                            return arr2.reduce((a,b) => a + b.duration, 0) / 1000 / 60 / 60
                        })
                        return item
                    })
                    return result
                },
                monthTotal() {
                    return this.currentMounth.reduce((a, b) => {
                        return a + b.num * 3600 * 1000
                    }, 0)
                },
                getTitle() {
                    if( Array.isArray(this.dialogTabs) && this.dialogTabs.length > 0 ) {
                        let t = this.formateTime(new Date(this.dialogTabs[0].startTime))
                        return t.split(' ')[0] + t.substring(18);
                    }
                    else return '暂无数据'
                },
            },
        })
    </script>
</body>
</html>
